<template>
  <div class="Login-all">
    <div class="Login-frame">
      <h1 class="loginLabel">Login</h1>
      <el-form :model="ruler" :rules="rules" ref="ruler">
        <el-form-item prop="email" label-width="80px">
          <el-input
            maxlength="20"
            type="text"
            placeholder="email"
            autocomplete="off"
            id="email"
            v-model.trim="ruler.email"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password" label-width="80px">
          <el-input
            maxlength="16"
            type="password"
            placeholder="password"
            autocomplete="off"
            id="password"
            v-model.trim="ruler.password"
          ></el-input>
        </el-form-item>
      </el-form>
      <label class="loginError">{{ Message }}</label>
      <div class="btn-login" @click="login">Login</div>
        <router-link to="/" class="toTeacherLogin">Teacher Login</router-link>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { serverAddress } from "../js/config";
export default {
  name: "RulerLogin",
  components: {},
  data() {
    return {
      Message: "",
      ruler: {
        // 将 user 改为 ruler
        email: "",
        password: "",
      },
      rules: {
        email: [
          { required: true, message: "邮箱不能为空", trigger: "blur" },
          { validator: this.validateEmail, trigger: "blur" },
        ],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
          { min: 10, max: 16, message: "请输入10-16位的密码", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    validateEmail(rule, value, callback) {
      const emailRegex = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
      if (!value || emailRegex.test(value)) {
        callback();
      } else {
        callback(new Error("请输入有效的邮箱地址"));
      }
    },
    login() {
      this.$refs.ruler.validate((valid) => {
        if (valid) {
          let formObj = {
            rootEmail: document.getElementById("email").value,
            rootPwd: document.getElementById("password").value,
          };
          console.log(this.$route.path);
          axios({
            /*  url:`${serverAddress}/login/root`, */
            url: "https://mock.apifox.com/m2/3662090-0-default/129573524",
            method: "POST",
            data: formObj,
          }).then((response) => {
            if (response.data.code === 1) {
              console.log(response.data);
              if (this.$router.currentRoute.path !== "/RulerMain") {
                this.$router.replace({
                  path: "/RulerMain",
                });
                sessionStorage.setItem('Email', response.data.data.rootEmail);
                sessionStorage.setItem('Id', response.data.data.rootId);
                sessionStorage.setItem('Head', response.data.data.rootHead);
                sessionStorage.setItem('JWT', response.data.data.rootJWT);
                sessionStorage.setItem('Name', response.data.data.rootName);
                sessionStorage.setItem('Identity', '管理员');
                /* this.$store.commit("setEmail", response.data.data.rootEmail);
                this.$store.commit("setId", response.data.data.rootId);
                this.$store.commit("setHead", response.data.data.rootHead);
                this.$store.commit("setJWT", response.data.data.rootJWT);
                this.$store.commit("setName", response.data.data.rootName);
                this.$store.commit("setIdentity","管理员");
                console.log(this.$store.state.userInformation); */
              }
              if (this.$route.name !== "RulerMain") {
                this.Message = "登录失败，请重新尝试";
              }
            } else {
              console.log(response);
              console.log(response.data);
              this.Message = "账号或密码输入错误";
              setTimeout(() => {
                this.Message = "";
              }, 5000);
            }
          });
        } else {
          this.Message = "请按要求输入信息";
          setTimeout(() => {
            this.Message = "";
          }, 5000);
        }
      });
    },
  },
};
</script>

<style scoped>
.toTeacherLogin{
  font-size: 15px;
  position: relative;
  top:50px;
  left:130px ;
}
.Login-all {
  height: 726px;
  width: 100%;
  background-image: linear-gradient(to right, #eeb5eb, #a1bce1);
}
.Login-frame {
  height: 510px;
  width: 370px;
  border: 2px solid rgb(210, 210, 238);
  border-radius: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -52%);
  background-color: rgb(240, 244, 248);
}
.loginLabel {
  width: 300px;
  line-height: 60px;
  display: inline-block;
  font-weight: 1000;
  font-size: 35px;
  text-align: center;
  cursor: pointer;
  text-shadow: 0px 1px 0px #2f6627;
  border-top-left-radius: 18px;
  color: #eaa3e7;
  position: relative;
  top: 0px;
  left: 35px;
}
.el-form {
  width: 400px;
  height: 300px;
  position: absolute;
  top: 90px;
  left: -20px;
}

.el-input {
  height: 40px;
  padding-top: 50px;
}

.el-form-item::v-deep .el-input__inner {
  width: 250px;
  display: block;
  border: 0;
  border-bottom: 1px solid rgb(128, 125, 125);
  font-size: 15px;
  outline: none;
  background-color: rgb(240, 244, 248);
}
.el-form-item::v-deep .el-input__inner[id="email"] {
  color: #000;
  position: relative;
  left: 0px !important;
}

.message {
  font-size: 10px;
}

.btn-login {
  height: 23px;
  text-align: center;
  padding: 10px;
  border-radius: 23px;
  font-weight: 700;
  font-size: 17px;
  margin: 0 auto;
  width: 73%;
  margin-top: 280px;
  background-image: linear-gradient(to right, #a6c1ee, rgb(251, 194, 235));
  color: #fff;
}

.loginError {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-55%, 200%);
  font-size: 15px;
  color: rgb(234, 116, 116);
}
</style>